import { ref, computed, reactive, effect, isReactive, isProxy } from "../../lib/guide-mini-vue.esm.js"

export const App = {
    name: "App",
    template: `<div>hi, {{ obj.name }}, {{ obj.age }}, {{ count }}, {{ countNext.value }}</div>`,
    setup() {
        const count = window.count = ref(1)
        const obj = window.obj = reactive({
            name: 'mini-vue',
            age: 13,
        })
        effect(() => {
            window.countPlus = count.value * 10
        })
        const countNext = window.countAdd = computed(() => count.value + 1)

        console.log('isReactive: ', isReactive(obj))
        console.log('isProxy: ', isProxy(obj))

        return {
            message: 'mini-vue',
            count,
            countNext,
            obj
        }
    }
}